<template>
  <view class="login page custom-page">
    <view class="top">
      <image class="img" src="../../static/img/logo.png" />
    </view>

    <u-form :model="form" ref="uForm" label-width="180">
      <u-form-item>
        <u-input v-model="form.name" placeholder="请输入手机号" maxlength="11" >
          <u-icon name="photo"></u-icon>
        </u-input>
        
      </u-form-item>
      <u-form-item>
        <u-input type="password" v-model="form.password" placeholder="请输入密码" />
      </u-form-item>
    </u-form>

    <view class="btn">
      <view class="pass" @click="handleRegister(0)">忘记密码？</view>
      <view class="agree">
        <u-checkbox 
          v-model="showAgree"
          shape="circle" 
          class="text_color"
        >同意</u-checkbox>
        <view class="text_color">《软件用户协议》</view>
        <view class="text_color">《隐私政策》</view>
      </view>

      <u-button class="login_btn" ripple  shape="circle" :loading="loading" @click="handleLogin()"
      >登录</u-button>
      <u-button class="register_btn" ripple shape="circle" @click="handleRegister(1)"
      >注册账户</u-button>
      <view class="customer"><u-icon name="server-fill" color="#bebebe"></u-icon>联系客服</view>

    </view>

    <view class="bottom">
      <view class="text">—— 第三方一键免注册登录 ——</view>
      <view class="tupian">
        <image @click="handleWeiChat" class="icon img" src="../../static/img/weiChat_.png" />
        <image class="icon" src="../../static/img/qq.png" />
      </view>
    </view>

    <!-- <u-button class="u-m-t-80" ripple type="success" shape="circle" :loading="loading" @click="handleLogin()"
    >登录</u-button> -->

  </view>
</template>

<script>
import { login, getUser } from '../../api/modules/user'
import { toPage } from '../../utils'
import md5 from 'md5';

export default {
  data() {
    return {
      form: {
        name: '14757922577',
        password: 'qwerty1',
        // name: '',
        // password: ''
      },
      loading: false,
      showAgree: false
    }
  },

  methods: {
    handleWeiChat() {
      console.log('跳转到微信')
    },
    handleRegister(type) {
      console.log("注册账户")
      uni.navigateTo({
        url: `/pages/mine/register?type=${type}`
      })
    },
    handleLogin() {

      if (!this.showAgree) {
        this.$u.toast(`请先阅读并同意软件用户协议与隐私政策`)
        return;
      }

      let reg_name = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (this.form.name === '') {
        this.$u.toast('请输入您的手机号码')
        return
      } else if (!reg_name.test(this.form.name)) {
        this.$u.toast('手机号不正确')
        return
      }

      if (this.form.password.length < 6) {
        this.$u.toast('密码不正确')
        return
      }

      this.loading = true
      uni.removeStorageSync('token')
      let form = {
        name: this.form.name,
        password: md5(this.form.password)
      }
      login(form).then((res) => {
        if (res.code === 200) {
          console.log(res.data)
          this.$u.toast('登录成功')
          uni.setStorage({
            key: 'token',
            data: res.data.token
          })
          getApp().globalData.token = res.data.token
          getApp().globalData.loginForm = this.form;
          getApp().globalData.glbCurrentDataMap = res.data
          uni.navigateTo({
            url: '/pages/index/index' 
          })
        } else {
          this.$u.toast(res.message)
        }
      })
    },

    _getUserInfo() {
      getUser()
    }
  }
}
</script>

<style lang="scss" scoped>
.login {
  padding: 80rpx 60rpx;

  .top {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40rpx;
    .img {
      width: 150rpx;
      height: 150rpx;
      border-radius: 50%;
    }
  }

  .btn {
    .pass {
      display: flex;
      justify-content: end;
      color: #eab131;
    }
    .agree{
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 10rpx;
      color: #b9b9b9;
      /deep/ .u-checkbox__label {
        color: #b9b9b9;
      }

      .text_color {
        color: #b9b9b9;
      }

      
    }
    .login_btn {
        color: #FFFFFF;
        font-size: 34upx;
        width: 470upx;
        height: 100upx;
        background: linear-gradient(-90deg, rgba(63, 205, 235, 1), rgba(188, 226, 158, 1));
        box-shadow: 0upx 0upx 13upx 0upx rgba(164, 217, 228, 0.2);
        border-radius: 50upx;
        line-height: 100upx;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        margin-top: 40upx;
    }
    .register_btn {
      color: #FFFFFF;
      font-size: 34upx;
      width: 470upx;
      height: 100upx;
      background: linear-gradient(-90deg,#bbed0b,#8dc63f);
      box-shadow: 0upx 0upx 13upx 0upx rgba(164, 217, 228, 0.2);
      border-radius: 50upx;
      line-height: 100upx;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      margin-top: 30upx;
    }
    .login_btn::after,
    .register_btn::after {
      border: none;
    }
    .customer {
      margin-top: 10rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      color: #bebebe;
    }
  }

  .bottom {
    position: fixed;
    bottom: 30rpx;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    .text {
      font-size: 24rpx;
      color: #b4b4b4;
    }
    .tupian {
      display: flex;
    }
    .icon {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      margin-top: 10rpx;
    }
    .img {
      transform:scale(0.9);
      margin-right: 20rpx;
    }
  }
}
</style>
